<template>
  <div>
    <div class="background">
      <!-- 假设你有一个不同的背景图片 -->
      <img :src="registerImgSrc" width="100%" height="100%" alt=""/>
    </div>
    <div class="register_container">
      <!-- 注册块 -->
      <div class="register_box">
        <!-- 表单区域 -->
        <h4>注册</h4>
        <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="register_form" label-width="0">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" placeholder="用户名" prefix-icon="iconfont icon-user" class="in"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" placeholder="密码" prefix-icon="iconfont icon-lock" type="password" show-password class="in"></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item prop="confirmPassword">
            <el-input v-model="registerForm.confirmPassword" placeholder="确认密码" prefix-icon="iconfont icon-check" type="password" show-password class="in"></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="submitRegisterForm">注册</el-button>
            <el-button type="info" @click="goToLoginForm">已有账号？登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerImgSrc:require('../assets/myfavorite.jpg'), // 假设你有一个不同的注册背景图片
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
      },
      registerRules: {
        // 在这里定义你的注册表单验证规则
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // ... 其他规则
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // ... 其他规则
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' } // 自定义验证器
        ],
      },
    };
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致!'));
      } else {
        callback();
      }
    },
    submitRegisterForm() {
      this.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          // 提交表单
          // ...
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goToLoginForm() {
      this.$router.push({path:"/login"});
    },
  },
};
</script>

<style scoped>
.register_container {
  background-color:palegreen;
}

.register_box {
  width: 450px;
  height: 300px;
  /* background-color: #ffffff; */
  background: rgba(255,255,255,0.3);
  border: 1px solid black;
  opacity: 0.85;
  filter: alpha(opacity=90);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}

.register_form {
  position: absolute;
  bottom: 0%;
  width: 100%;
  border: 30px;
}

.btns {
  display: flex;
  justify-content: space-around;
}

.in {
  margin-left: 10%;
  margin-right: 10%;
  width: 350px;
}

h4 {
  font-size: medium;

  color:rgb(7, 7, 7);

  text-align:center;
}

/* 如果需要，可以添加更多针对注册页面的特定样式 */

</style>
